<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
		LBS app
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css"
        />
        <link rel="stylesheet" href="my.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
        </script>
        <script src="my.js">
        </script>
		
		<!-- 			CODE BEGIN map, points, filtering				-->
        <script src="location-fusion-client.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <script>
        	markersArray = [];
	    	$(document).ready(function() {

				//Create Google Map resources
	    		map = LocationFusion.MarkerService.setUpGoogleMapWithMarkers(document.getElementById("map_canvas"), 47.4797, 19.05389, "", map_loaded);
				 
		    	   //Handle click option on all
		    	  $("div#all").click(function() {
		    		  map = LocationFusion.MarkerService.refreshGoogleMapWithMarkers(map, 47.4797, 19.05389, "", map_loaded);					  
			   	   });
				   
				  //Handle click option on meal
		    	  $("div#meal").click(function() {
		    		  map = LocationFusion.MarkerService.refreshGoogleMapWithMarkers(map, 47.4797, 19.05389, "meal", map_loaded);
			   	   });

		    	  //Handle click option on outgoing
		    	  $("div#outgoing").click(function() {
		    		  map = LocationFusion.MarkerService.refreshGoogleMapWithMarkers(map, 47.4797, 19.05389, "outgoing", map_loaded);
			   	   });
				   
				   //Handle click option on education
		    	  $("div#education").click(function() {
		    		  map = LocationFusion.MarkerService.refreshGoogleMapWithMarkers(map, 47.4797, 19.05389, "education", map_loaded);
			   	   });
				   
				   //Handle click option on printer
		    	  $("div#printer").click(function() {
		    		  map = LocationFusion.MarkerService.refreshGoogleMapWithMarkers(map, 47.4797, 19.05389, "printer", map_loaded);
			   	   });
				   
				   //Handle click option on sport
		    	  $("div#sport").click(function() {
		    		  map = LocationFusion.MarkerService.refreshGoogleMapWithMarkers(map, 47.4797, 19.05389, "sport", map_loaded);
			   	   });
				   
				   //Handle click option on dormitory
		    	  $("div#dormitory").click(function() {
		    		  map = LocationFusion.MarkerService.refreshGoogleMapWithMarkers(map, 47.4797, 19.05389, "dormitory", map_loaded);
			   	   });
				   
				   //Handle click option on other
		    	  $("div#other").click(function() {
		    		  map = LocationFusion.MarkerService.refreshGoogleMapWithMarkers(map, 47.4797, 19.05389, "other", map_loaded);
			   	   });				   	
    		});
			
			slat = 47.4797;
			slng = 19.05389;
			
			

	    	//Handle select marker
	    	function map_loaded(markers) {
			
		    	for(var i=0; i<markers.length; i++) {
		    		//Set marker handler
					console.log(markers[i]);
		    		google.maps.event.addListener(markers[i], 'click', function() { 
					$("div#description").html(this.getTitle()); 
					mlat = this.position.lat();
					console.log(mlat);
					mlng = this.position.lng();
					//$("div#tavolsag_lat").html(this.position.lat()+" m");
					//$("div#tavolsag_lng").html(this.position.lng()+" m");
					//$("div#proba").html(Math.abs(-1));
					$("div#proba").html(Math.round(Math.sqrt(Math.abs(slat-mlat)*Math.abs(slat-mlat)+Math.abs(slng-mlng)*Math.abs(slng-mlng))*111198)+" m");
					});	
					//console.log(mlat);
					 
		    	}
		    	$("div#description").html("POI-k betöltve");
	    	}

        </script>
		
	     <!-- 			CODE END 				-->
				
		 <!-- 			CODE BEGIN position on map				-->
		 <!-- ez új, kicsit máshogy próbáltam meg a pozíció adatot lekérni -->
    
	 	<script>
	    	$(document).ready(function() {

				//Create Google Map resources
	    		map_pos = LocationFusion.PositionService.setUpGoogleMapForPositioning(document.getElementById("map_pos"), 47.4797, 19.05389, "", map_loaded);
				google.maps.event.trigger(map_pos, 'resize');  
				$("div#pos_info").html("térképe betöltve");				
    		});
 
        </script>
	 <!-- 			CODE END 				-->
	 	 
	 <!-- 			CODE BEGIN users				-->
	<script>
	    	$(document).ready(function() {

	    		
	    		  //Handle login option
		    	  $("a#login").click(function() {
		    		  var username = document.getElementById("username_login");
					 // console.log(username);
				      var password = document.getElementById("password_login");
					  var email = document.getElementById("email_login");
			    	  LocationFusion.UserService.getUser(username.value, password.value, status_login, error);
		    		  $("div#info").html("Send request...");
		    	  });

	    		  //Handle create option
		    	  $("a#create").click(function() {					
		    		  var username = document.getElementById("username_create");
				      var password = document.getElementById("password_create");					 
				      var email = document.getElementById("email_create");
				      var additional_info = {mail: email.value, user: username.value};
			    	  LocationFusion.UserService.createUser(username.value, password.value, 
			    			  additional_info, status_create, error);
		    		  $("div#info").html("Send request...");
		    	  });

		    	  //Handle delete option
		    	  $("a#delete").click(function() {
		    		  var username = document.getElementById("username_delete");
				      var password = document.getElementById("password_delete");
					  var newpassword = document.getElementById("newpassword_delete");
				      var email = document.getElementById("email");
			    	  LocationFusion.UserService.deleteUser(username.value, password.value, status_delete, error);
		    		  $("div#info").html("Send request...");
		    	  });


		    	  //Handle update option
		    	  $("a#update").click(function() {
					  var username = document.getElementById("username_update");
				      var password = document.getElementById("password_update");
					  var newpassword = document.getElementById("newpassword_update");
				      var email = document.getElementById("email_update");
				      var additional_info = {mail: email.value, user: username.value};
			    	  LocationFusion.UserService.updateUser(username.value, password.value, newpassword.value, additional_info, status_update, error);
		    		  $("div#info").html("Send request...");
		    	  });

			    $("div#info").html("Information area!");

	    	});

	    	//Callback function for login
	    	function status_login(data, additional_obj) {
		    	if(data.code == "0") {
	    			$("div#info").html("Authenticated! Additional: " + additional_obj.user + "&" + additional_obj.mail);
					console.log(window.location.pathname);
					window.location.href= window.location.pathname+"#page12";
		    	} else {
	    			$("div#info").html(data.message);
		    	}
	    	}

	    	//Callback function for create user
	    	function status_create(data) {
		    	if(data.code == "0") {
	    			$("div#info").html("New user was created!");
					document.location.href="#page12";
		    	} else {
	    			$("div#info").html(data.message);
		    	}
	    	}

	    	//Callback function for delete user
	    	function status_delete(data) {
		    	if(data.code == "0") {
	    			$("div#info").html("User was deleted!");
		    	} else {
	    			$("div#info").html(data.message);
		    	}
	    	}

	    	//Callback function for update user
	    	function status_update(data) {
		    	if(data.code == "0") {
	    			$("div#info").html("User was updated!");
					document.location.href="#page12";
		    	} else {
	    			$("div#info").html(data.message);
		    	}
	    	}

	    	//Callback function for handle AJAX error
	    	function error(data) {
	    		$("div#info").html("An error was occured!");
	    	}
	    	</script>
        <!-- 			CODE END 				-->
		
		
		 <!-- 			CODE BEGIN távolság			-->
    
	 	<script>
	    	$(document).ready(function() {
				//var helyszin = document.getElementById("helyszin");
				
				$("div#1000").click(function() {
		    		  $("div#set_info").html("ez bizony 1000 m");
			   	   });		   
    		});
 
        </script>
	 <!-- 			CODE END 				-->
    </head>
    
	
	
    <body>
        <!-- home -->
        <div data-role="page" id="page1">
            <div data-theme="b" data-role="header">
                <h3> LBS Navi </h3>
            </div>
            <div data-role="content">			
                <div style=" text-align:center">
                    <img style="width: 100%;" src="http://assets.codiqa.com/Xo6PWZ2T1m7LDLV3DhXA_P1450143_k.jpg">
                </div>
				
				<div id="info"></div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput1"> Felhasználónév: </label>
                        <input name="username_login" id="username_login" placeholder="" value="" type="text">
                    </fieldset>
                </div>
				
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput2"> Jelszó: </label>
                        <input name="password_login" id="password_login" placeholder="" value="" type="password">
                    </fieldset>
                </div>
				
				<!--  valamiért minden jelszót beenged... -->
				<a id="login" data-role="button" data-theme="b" href="#page1"> Ok </a>				
                <a data-role="button" data-theme="b" href="#page16"> Regisztráció </a>
            </div>
        </div>	
		
        		
        <!-- navigation_pre -->
        <div data-role="page" id="page12">
            <div data-theme="b" data-role="header">
                <h3> LBS Navi </h3>
            </div>
            <div data-role="content">  <!-- ez az új pozíciókeresés -->
				 <center> <div id="map_pos" style="width:280px;height:200px;"> </div> </center>
				 <div id="pos_info"> térkép betöltése...</div>
				
				 <a id="getposition" data-role="button" href="#page12"> Get position </a>
				 <!-- ez még nincs megvalósítva, itt a cím beírásával lehetne pozíciót kapni -->
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinput13"> Helyszín </label>
                        <input name="" id="helyszin" placeholder="" value="" type="text">
                    </fieldset>
                </div>		
                
                <a data-role="button" data-theme="b" href="#page6"> Keresés </a>
            </div>
			
			<!-- egy állandó alsó menüsor-->
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li> <a href="#page6" data-theme="" data-icon="search"> Keresés </a> </li>
                    <li> <a href="#page7" data-theme="" data-icon="star"> Kedvencek </a> </li>
                    <li> <a href="#page8" data-theme="" data-icon="info"> History </a> </li>
                    <li> <a href="#page9" data-theme="" data-icon="gear"> Beállítás </a> </li>
                </ul>
            </div>
        </div>
				
				
        <!-- navigation -->
		<!-- kiegészítettem az összes típussal -->
        <div data-role="page" id="page6">
            <div data-theme="b" data-role="header">
                <h3> LBS Navi </h3>
            </div>
            <div data-role="content"> 
                <center> <div id="map_canvas" style="width:280px;height:200px;"></div> </center>
				<div id="description">POI-k betöltése...</div>
				<div id="tavolsag_lat"> 0 m</div>
				<div id="tavolsag_lng"> 0 m</div>
				<div id="proba"> proba </div>
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        Mit szeretnél csinálni?
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            <div id="all"> Mindegy </div>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            <div id="meal"> Kaja </div>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            <div id="outgoing"> Szórakozás </div>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            <div id="education"> Oktatás </div>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            <div id="printer"> Nyomtatás </div>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            <div id="sport"> Sport </div>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            <div id="dormitory"> Kollégium </div>
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            <div id="other"> Egyéb </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li> <a href="#page6" data-theme="" data-icon="search"> Keresés </a> </li>
                    <li> <a href="#page7" data-theme="" data-icon="star"> Kedvencek </a> </li>
                    <li> <a href="#page8" data-theme="" data-icon="info"> History </a> </li>
                    <li> <a href="#page9" data-theme="" data-icon="gear"> Beállítás </a> </li>
                </ul>
            </div>
        </div>
		
						
        <!-- navigation_result -->
		<!-- az eredmény szerepelne itt, de ez még nincs kész, nem is biztos, hogy kell erre külön page-->
        <div data-role="page" id="page13">
            <div data-theme="b" data-role="header">
                <h3> LBS Navi </h3>
            </div>
            <div data-role="content"> 
                <img src="https://maps.googleapis.com/maps/api/staticmap?center=budapest&amp;zoom=11&amp;size=440x250&amp;markers=&amp;sensor=false"
                width="440" height="250">
                <input type="submit" value="Refresh GPS">
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        Ide szeretnél menni
                    </li>
                    <li data-theme="c">
                        <a href="#" data-transition="slide"> Button </a>
                    </li>
                </ul>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinput14"> Helyszín </label>
                        <input name="" id="textinput14" placeholder="" value="" type="text">
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textarea3"> Pozíciód: </label>
                        <textarea name="" id="textarea3" placeholder="" data-mini="true"></textarea>
                    </fieldset>
                </div>
                <a data-role="button" data-theme="b" href="#page6"> Keres </a>
            </div>
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li> <a href="#page6" data-theme="" data-icon="search"> Keresés </a> </li>
                    <li> <a href="#page7" data-theme="" data-icon="star"> Kedvencek </a> </li>
                    <li> <a href="#page8" data-theme="" data-icon="info"> History </a> </li>
                    <li> <a href="#page9" data-theme="" data-icon="gear"> Beállítás </a> </li>
                </ul>
            </div>
        </div>
				
        <!-- favourites -->
		<!-- még nincs kész -->
        <div data-role="page" id="page7">
            <div data-theme="b" data-role="header">
                <h3> LBS Navi </h3>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        Kedvencek
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            BME Copy
                        </a>
                    </li>
					<li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            St épület
                        </a>
                    </li>
					<li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            Popcorner Pub
                        </a>
                    </li>
                </ul>
            </div>
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li> <a href="#page6" data-theme="" data-icon="search"> Keresés </a> </li>
                    <li> <a href="#page7" data-theme="" data-icon="star"> Kedvencek </a> </li>
                    <li> <a href="#page8" data-theme="" data-icon="info"> History </a> </li>
                    <li> <a href="#page9" data-theme="" data-icon="gear"> Beállítás </a> </li>
                </ul>
            </div>
        </div>
			
        <!-- history -->
		<!-- még nincs kész -->
        <div data-role="page" id="page8">
            <div data-theme="b" data-role="header">
                <h3> LBS Navi </h3>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-role="list-divider" role="heading">
                        Előzmények
                    </li>
                    <li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            Goldmann Menza							
                        </a>
                    </li>
					<li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            Bajor söröző
                        </a>
                    </li>
					<li data-theme="c">
                        <a href="#page6" data-transition="slide">
                            MM épület
                        </a>
                    </li>
                </ul>
            </div>
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
               <ul>
                    <li> <a href="#page6" data-theme="" data-icon="search"> Keresés </a> </li>
                    <li> <a href="#page7" data-theme="" data-icon="star"> Kedvencek </a> </li>
                    <li> <a href="#page8" data-theme="" data-icon="info"> History </a> </li>
                    <li> <a href="#page9" data-theme="" data-icon="gear"> Beállítás </a> </li>
                </ul>
            </div>
        </div>
				
        <!-- settings -->
		<!-- még nincs kész -->
        <div data-role="page" id="page9">
            <div data-theme="b" data-role="header">
                <h3> LBS Navi </h3>
            </div>
			
			<div id="set_info"> Set-info </div>
            <div data-role="content">
			<ul data-role="listview" data-divider-theme="b" data-inset="true">
                   <!-- <li data-role="list-divider" role="heading">
                        Mit szeretnél csinálni?
                    </li>
                    <li data-theme="c">
                        <a href="#page9" data-transition="slide">
                            <div id="1000"> 1000 </div>
                        </a>
                    </li>
					</ul> -->
			
                <div>
                    <p>
                        <b>
                            Milyen távolságban keressen helyeket? (m)
                        </b>
                    </p>
                </div>
                <div data-role="fieldcontain">
                    <label for="selectmenu1">
                    </label>
                    <select data-native-menu="false" name="" data-theme="a">
                        <option value="100" id="100"> 100 m </option>
                        <option value="500" id="500"> 500 m </option>
                        <option value="1000" id="1000"> 1 km </option>
                        <option value="2000" id="2000"> 2 km </option>
                    </select>
                </div>
                <div>
                    <p>
                        <b>
                            Előzmények törlése?
                        </b>
                    </p>
                </div>
                <div data-role="fieldcontain">
                    <label for="selectmenu3">
                    </label>
                    <select data-native-menu="false" name="" data-theme="a">
                        <option value="no">
                            nem
                        </option>
                        <option value="yes">
                            igen
                        </option>
                    </select>
                </div>
                <a data-role="button" data-theme="b" href="#page12">
                    Ok
                </a>                
                <a data-role="button" data-theme="b" href="#page14">
                    Jelszócsere
                </a>
            </div>
            <div data-role="tabbar" data-iconpos="top" data-theme="a">
                <ul>
                    <li> <a href="#page6" data-theme="" data-icon="search"> Keresés </a> </li>
                    <li> <a href="#page7" data-theme="" data-icon="star"> Kedvencek </a> </li>
                    <li> <a href="#page8" data-theme="" data-icon="info"> History </a> </li>
                    <li> <a href="#page9" data-theme="" data-icon="gear"> Beállítás </a> </li>
                </ul>
            </div>
        </div>
		
				
        <!-- felh_uj -->
        <div data-role="page" id="page16">
            <div data-theme="b" data-role="header">
                <h3> LBS Navi </h3>
            </div>
			<div id="info"></div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinput21">
                            Felhasználónév:   
                        </label>
                        <input name="username_create" id="username_create" placeholder="" value="" type="text">
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinput22">
                            Jelszó:            
                        </label>
                        <input name="password_create" id="password_create" placeholder="" value="" type="password">
                    </fieldset>
                </div>						 
							
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinput23">
                            e-mail cím:       
                        </label>
                        <input name="email_create" id="email_create" placeholder="" value="" type="email" />
                    </fieldset>
                </div>
                <a id="create" data-role="button" data-theme="b" href="#page16">
                    Ok
                </a>
				<a data-role="button" data-theme="b" href="#page1">
                    Vissza
                </a>
            </div>            
        </div>
		
				
        <!-- felh_jelszocsere -->
        <div data-role="page" id="page14">
            <div data-theme="b" data-role="header">
                <h3> LBS Navi </h3>
            </div>
			<div id="info"></div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput15">
                            Felhasználónév
                        </label>
                        <input name="username_update" id="username_update" placeholder="" value="" type="text">
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput18">
                            Régi jelszó
                        </label>
                        <input name="password_update" id="password_update" placeholder="" value="" type="password">
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput16">
                            Új jelszó
                        </label>
                        <input name="newpassword_update" id="newpassword_update" placeholder="" value="" type="password">
                    </fieldset>
                </div>
                <a id="update" data-role="button" data-theme="b" href="#page14">
                    Ok
                </a>
            </div>            
        </div>
					
        <script>
              //App custom javascript
        </script>
    </body>

</html>